<template>
    <div class="roleRoot">
         <div class="roleRoot_top">
		    <div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">角色权限<i class="el-icon-close"></i></div>
		</div>
        <div class="List">
            <div class="roleList">
                <h3>角色</h3>
				<el-tree
				    :data="roleList"
				    node-key="id"
				    ref="tree"
				    highlight-current
            current-node-key
            @node-click="toSeeRoot"
				    :props="defaultProps">
				</el-tree>
				
				<!--
                <ul>
                    <li @click="toSeeRoot(item.id,$event)" :class="{'active':index==roleIndex}" :data-index='index' v-for="(item,index) in roleList" :key="index">{{item.name}}</li>
                </ul>
				-->
            </div>
            <div class="nodeList">
                <h3>功能权限</h3>
                <!-- <div class="nodeTxt">
                    <div class="left">
                        <h4>主节点</h4>

                    </div>
                    <div class="right">
                        <h4>分节点</h4>
                    </div>
                </div> -->
                <el-tree
                    :data="roleRootList"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    current-node-key
                    highlight-current
					          :default-checked-keys="checkedList"
                    @check-change="handleCheckChange"
                    :props="defaultProps">
                </el-tree>
            </div>
        </div>

        <div class="btn">
            <el-button type="primary" @click="toSave">保存</el-button>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      roleList: [],
      roleIndex: 0,
      roleRootList: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
	  checkedList:[],
      needId:[],
      role_Id:null,
    };
  },
  mounted() {
    this.getRoleList();
  },
  methods: {
    // 获取角色列表
    getRoleList() {
      this.$http.post("/api/root/Rbac/getrole").then(res => {
        if (res.code == 1) {
          this.roleList = res.data ? res.data : [];
          let roleid = res.data[0].id
          this.role_Id = roleid
          // this.getAllRoot(roleid)
        }
      });
    },

    // 点击对应的角色
	/*
    toSeeRoot(roleId, e) {
      this.roleIndex = e.target.dataset.index;
      this.getAllRoot(roleId);
      this.role_Id = roleId
    },
	*/
	toSeeRoot(data) {
		
		this.role_Id = data.id;
	  this.getAllRoot(data.id);
	  
	},
    handleCheckChange() {
      // let res = this.$refs.tree.getCheckedNodes();
      // console.log(res,'00000');
      // let arr = [];
      // res.forEach(item => {
      //   arr.push(item.id);
      // });
      // this.needId = arr
        var rad=''
        var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
        var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}
        console.log(ridsa,ridsb,'======');
        ridsb.forEach(ids=>{//获取选中的所有的父级id
          rad+=','+ids.pid
        })
        rad=rad.substr(1) // 删除字符串前面的','
        var rids=rad+','+ridsa
        var arr=rids.split(',')//  把字符串转换成数组
        arr=[...new Set(arr)]; // 数组去重
        rids=arr.join(',')// 把数组转换成字符串
        // console.log(rids,'------')
        this.needId = rids
    },

    // 查看权限
    getAllRoot(role_id) {
      this.$http
        .post("/api/root/Rbac/rolepermission", { role_id })
        .then(res => {
          if (res.code == 1) {
            // console.log(res.data,'////');
            this.roleRootList = res.data.tree ? res.data.tree : [];
			      this.checkedList = res.data.checked ? res.data.checked : [];
          }
        });
    },

    // 保存
    toSave(){
        let ids = this.needId
        this.$http.post('/api/root/Rbac/authorize',{role_id:this.role_Id,ids}).then(res=>{
            // console.log(res);
			if(res.code==1){
				this.$message.success('修改成功');
			}else{
				this.$message.error(res.msg?res.msg:'修改失败');
			}
			
        })
    }
  }
};
</script>

<style lang="less" scoped>
@import "roleRoot.less";
</style>


